<template>
  <div class="box">{{ 1 + 1 }}</div>
  <div class="box1">栏目1</div>
  <div class="box2">栏目2</div>
  <div class="container">
    <div class="c-box" v-for="(item, index) in list" @click="onSelect($event)">{{ item }}</div>
  </div>
  <div>
    <button @click="add">添加</button>
    <button @click="test1">测试1</button>
    <button @click="test2">测试2</button>
    <button @click="test3">测试3</button>
    <button @click="test4">测试4</button>
    <button @click="test5">测试5</button>
    <button @click="test6">测试6</button>
    <button @click="test7">测试7</button>
    <button @click="test8">测试8</button>
    <button @click="test9">测试new</button>
    <button @click="test10">动态添加DOM</button>
    <textarea v-model="str" name="" cols="30" rows="10"></textarea>
    <button @click="test">测试</button>
  </div>
</template>
<script>
import jQuery from 'jquery'
import '@/libs/jquery-ui-1.14.1.custom/jquery-ui.js'
//import Parser from './class/Explain.js'
import Parser from '../../../../daydayup2021/js/Explain.esm.js'
export default {
  data() {
    return {
      a: 1,
      b: 2,
      list: [1, 2, 3, 4, 5, 6, 7, 8],
      str: ''
    }
  },
  methods: {
    test() {
      let str = this.str
      let p = new Parser({
        context: this,
        $,
        window
      })
      p.parse(str)
    },
    add(value) {
      console.log(`helloworld,add`, value)
      //-1.3
      //3 - 1.3
    },
    onSelect(e) {
      console.log(e)
      $('.box1').position({
        my: 'left top',
        at: 'left top',
        of: e.target,
        within: $(e.target).parent()
      })
    },
    test1() {
      let p = new Parser({
        context: this
      })
      p.parse('console.log(`helloworld`,`v2`);', {})
    },
    test2() {
      let p = new Parser({
        context: this
      })
      p.parse('this.add(`1234`)')
    },
    showD(d) {
      console.log(`showD`, d)
    },
    getA() {
      return 'a'
    },
    test3() {
      let str = `
     $('.box1').position({
      my: 'left top',
      at: 'left top',
      of: '.box2',
     })
    `
      let p = new Parser({
        context: this,
        $
      })
      p.parse(str)
    },
    test4() {
      let str = `
        var t = 1 + 1 + 1;
      var d = this.getA();
      console.log(t,d);
      this.showD(d);
      `
      let p = new Parser({
        context: this,
        $
      }).parse(str)
    },
    test5() {
      let str = `
        const t = Math.pow(2,2);

      console.log(Math.pow(2,3));
      `
      let p = new Parser({
        context: this,
        $
      })
      p.parse(str)
    },
    test6() {
      let str = `
      function abc(a,b){
      console.log('helloworld',a,b);
      }
      abc('abc','bcd');
      `

      let p = new Parser({
        context: this,
        $
      }).parse(str)
    },
    test7() {
      let str = `
      var a = (abc) => {
        console.log(999,abc);
      };
      a('888');
      `
      let p = new Parser({
        context: this,
        $
      }).parse(str)
    },
    test8() {
      let str = `
        var a = function(){
          var abc = 999;
          var bcd = 888
          return {
            'abc' : abc,
            'bcd' : bcd
          };
        }

        console.log(a());
      `
      let p = new Parser({
        context: this,
        $
      }).parse(str)
    },
    test9() {
      let str = `
        var a = function(){
          this.a = 1 + 1;
          this.b = 2;
          return this;
        }
        var c = new a(1);
        console.log(c);
      `
      let p = new Parser({
        context: this,
        $
      }).parse(str)
    },
    test10() {
      let str = `
        $('body').append('<div>Helloworld</div>');
        //window.alert(999);
        console.log(context);
        
      `
      let p = new Parser({
        context: this,
        $,
        window
      }).parse(str)
    }
  },
  mounted() {
    console.log(`helloworld`)
    $('.box1').position({
      my: 'left center',
      at: 'right center',
      of: '.box2'
    })

    this.test7()

    //let abc = function abc(a, b) {
    //console.log(arguments)
    //console.log(a, b)
    //}
    //abc(1, 2)
  }
}
</script>
<style type="text/css" lang="scss">
.container {
  display: grid;
  grid-template-rows: repeat(4, 50px);
  grid-template-columns: repeat(4, 50px);
  gap: 10px;
  width: 230px;
  .c {
    &-box {
      width: 50px;
      height: 50px;
      border: 1px solid #000;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}
.box,
.box1,
.box2 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
.box1 {
  height: 150px;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
}
</style>
